<template>
  <div class="title-list">
    <span
      class="title-list-name"
      v-for="(article, articleInd) in list"
      :key="'article' + articleInd"
    >
      {{ article }}
    </span>
  </div>
</template>

<script>
export default {
  name: "titleList",
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="less" scoped>
.title-list {
  display: flex;
  flex-direction: column;
  &-name {
    text-align: center;
    font-size: 0.35rem;
    font-weight: bold;
    position: relative;
    text-decoration: none;
    margin: auto;
    margin-top: 0.2rem;
    &::after {
      content: "";
      position: absolute;
      bottom: -3px;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: #edc40e;
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 1s ease;
    }
    &:hover::after {
      transform: scaleX(1);
    }
  }
}
</style>
